import React, { useState } from 'react'
import { Table, Space, Modal, Radio, Form, DatePicker, Input } from 'antd';
import './css/DataList.scss'

export default function DataList() {
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [selectItem, setSelectItem] = useState('')
    const handleOpen = (record) => {
        setSelectItem(record.name)
        console.log(record)
        setIsModalVisible(true)
    }
    const handleOk = () => {
        setIsModalVisible(false);
      }
    const handleCancel = () => {
        setIsModalVisible(false);
      }
    const columns = [
        {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          width: 120,
          render: (text,record) => (
            <Space size="middle">
              <a onClick={() => handleOpen(record)}>减免</a>
            </Space>
          ),
        },
        {
          title: '催收状态',
          dataIndex: 'collection_status',
          key: 'collection_status',
          width: 120,
          render: (text, record) => {
              if(record.collection_status===1){
                  return (
                      <span>逾期结清</span>
                  )
              } if(record.collection_status===2){
                  return (
                      <span>逾期部分还款</span>
                  )
              } if(record.collection_status===3){
                return (
                    <span>逾期中</span>
                )
            }
          }
        },
        {
          title: '还款意愿',
          dataIndex: 'willingness_pay',
          key: 'willingness_pay',
          width: 120,
          render: (text, record) => {
            if(record.willingness_pay===1){
                return (
                    <span>承诺还款</span>
                )
            } if(record.willingness_pay===2){
                return (
                    <span>拒绝还款</span>
                )
            } if(record.willingness_pay===3){
              return (
                  <span>意向模糊</span>
              )
            }
          }
        },
        {
            title: '催收类型',
            dataIndex: 'collection_type',
            key: 'collection_type',
            width: 120,
            render: (text, record) => {
                if(record.collection_type===1){
                    return (
                        <span>自主催收</span>
                    )
                } if(record.collection_type===2){
                    return (
                        <span>委外催收</span>
                    )
                }
              }
        },
        {
            title: '合同编号',
            dataIndex: 'contract_no',
            key: 'contract_no',
            width: 120
        },
        {
            title: '用户账号',
            dataIndex: 'account',
            key: 'account',
            width: 120
        },
        {
            title: '用户姓名',
            dataIndex: 'name',
            key: 'name',
            width: 120,
        },
        {
            title: '资金方',
            dataIndex: 'funding_side',
            key: 'funding_side',
            width: 120
        },
        {
            title: '贷款总额',
            dataIndex: 'loan_amount',
            key: 'loan_amount',
            width: 120
        },
        {
            title: '应还款日',
            dataIndex: 'due_date',
            key: 'due_date',
            width: 120
        },
        {
            title: '应还本金',
            dataIndex: 'principal_repayable',
            key: 'principal_repayable',
            width: 120
        },
        {
            title: '应还利息',
            dataIndex: 'interest_repayable',
            key: 'interest_repayable',
            width: 120
        },
        {
            title: '保证金',
            dataIndex: 'security_deposit',
            key: 'security_deposit',
            width: 120
        },
        {
            title: '应还总额',
            dataIndex: 'total_amount_due',
            key: 'total_amount_due',
            width: 120
        },
        {
            title: '逾期天数',
            dataIndex: 'days_overdue',
            key: 'days_overdue',
            width: 120
        },
        {
            title: '罚息',
            dataIndex: 'penalty_interest',
            key: 'penalty_interest',
            width: 120
        },
        {
            title: '实还总额',
            dataIndex: 'total_net_repayments',
            key: 'total_net_repayments',
            width: 120
        },
        {
            title: '实还本金',
            dataIndex: 'principal_repayment',
            key: 'principal_repayment',
            width: 120
        },
        {
            title: '实还利息',
            dataIndex: 'real_interest',
            key: 'real_interest',
            width: 120
        },
        {
            title: '实还逾期罚息',
            dataIndex: 'overdue_penalty_interest',
            key: 'overdue_penalty_interest',
            width: 120
        },
        {
            title: '实还日期',
            dataIndex: 'adue_date',
            key: 'adue_date',
            width: 120
        },
        {
            title: '减免罚息',
            dataIndex: 'reduction_penalty',
            key: 'reduction_penalty',
            width: 120
        }
      ];
      const dataList = [
          {
            id: 1,
            collection_status: 1,
            willingness_pay: 1,
            collection_type: 1,
            contract_no: "08041210495",
            account: 15315130950,
            name: "蔡文学",
            phone: 18660813695,
            funding_side: "苏州银行",
            loan_amount: "¥2000.00",
            due_date: "2018-09-10",
            principal_repayable: 0.00,
            interest_repayable: 1045.00,
            security_deposit: 0.00,
            total_amount_due: 1045.00,
            days_overdue: 1,
            penalty_interest: 2.00,
            total_net_repayments: 1045.00,
            principal_repayment: 0.00,
            real_interest: 1045.00,
            overdue_penalty_interest: 2.00,
            adue_date: "2018-08-01",
            reduction_penalty: 0.00,
          },
          {
            id: 2,
            collection_status: 2,
            willingness_pay: 1,
            collection_type: 1,
            contract_no: "08041210495",
            account: 15315130950,
            name: "黄小明",
            phone: 18660813695,
            funding_side: "齐鲁银行",
            loan_amount: "¥2000.00",
            due_date: "2018-09-10",
            principal_repayable: 0.00,
            interest_repayable: 1045.00,
            security_deposit: 0.00,
            total_amount_due: 1045.00,
            days_overdue: 2,
            penalty_interest: 3.44,
            total_net_repayments: 900.00,
            principal_repayment: 0.00,
            real_interest: 900.00,
            overdue_penalty_interest: 0.00,
            adue_date: "2018-08-01",
            reduction_penalty: 0.00,
          },
          {
            id: 3,
            collection_status: 1,
            willingness_pay: 1,
            collection_type: 2,
            contract_no: "08041210495",
            account: 15315130950,
            name: "张杰",
            phone: 18660813695,
            funding_side: "建设银行",
            loan_amount: "¥2000.00",
            due_date: "2018-09-10",
            principal_repayable: 0.00,
            interest_repayable: 1045.00,
            security_deposit: 0.00,
            total_amount_due: 1045.00,
            days_overdue: 3,
            penalty_interest: 10.12,
            total_net_repayments: 900.00,
            principal_repayment: 0.00,
            real_interest: 900.00,
            overdue_penalty_interest: 0.00,
            adue_date: "2018-08-01",
            reduction_penalty: 0.00,
          },
      ]
      const collectionDetail = [
        {
            title: '借款信息',
            dataIndex: 'loan_amount',
            key: 'loan_amount',
            width: 140
        },
        {
            title: '产品',
            dataIndex: 'loan_product',
            key: 'loan_product',
            width: 140
        },
        {
            title: '期限',
            dataIndex: 'repayment_period',
            key: 'repayment_period',
            width: 140
        },
        {
            title: '利率',
            dataIndex: 'product_rate',
            key: 'product_rate',
            width: 140
        },
      ]
      const collectionList = [{
        id: 1,
        loan_amount: 60000,
        loan_product: "张小刚",
        repayment_period: 24,
        product_rate: "1.1%"
      }]
      const user = [
        {
            title: '1',
            dataIndex: 1,
            width: 140
        },
        {
            title: '2',
            dataIndex: 2,
            width: 140
        },
        {
            title: '3',
            dataIndex: 3,
            width: 140
        },
        {
            title: '4',
            dataIndex: 4,
            width: 140
        },
      ]
      const users = [
          {
            1: "姓名",
            2: selectItem,
            3: "身份证号",
            4: 371323198801041234
          },
          {
            1: "性别",
            2: "男",
            3: "民族",
            4: "汉"
          },
          {
            1: "出生日期",
            2: "1988-02-04",
            3: "年龄",
            4: "30"
          },
          {
            1: "有效期",
            2: "2013-06-13至2033-06-13",
            3: "发证机关",
            4: "凌水县公安局"
          },
          {
            1: "户籍地址",
            2: "山东省陵水县",
            3: "",
            4: ""
          },
          {
            1: "现住址",
            2: "尚东升济南市",
            3: "",
            4: ""
          },
          {
            1: "手机号",
            2: "15315130950",
            3: "婚姻状况",
            4: "已婚"
          },
          {
            1: "教育程度",
            2: "高中",
            3: "政治面貌",
            4: "党员"
          }
      ]
      const jianmian = [
        {
            title: "应还总额",
            dataIndex: 'total_amount_due',
            width: 120
        },
        {
            title: '本金',
            dataIndex: 'principal_repayable',
            width: 120
        },
        {
            title: '利息',
            dataIndex: 'interest_repayable',
            width: 120
        },
        {
            title: '罚息',
            dataIndex: 'penalty_interest',
            width: 120
        },
        {
            title: '罚息减免',
            dataIndex: 'reduction_penalty',
            width: 120
        },
        {
            title: '操作',
            dataIndex: 'caozuo',
            width: 160,
            render: () => (
                <Space size="middle">
                  <a>通过</a>
                  <a>不通过</a>
                </Space>
              ),
        },
      ]
      const jianmianList = [
          {
            total_amount_due: 2088,
            principal_repayable: 2000,
            interest_repayable: 80,
            penalty_interest: 8,
            reduction_penalty: 8
          }
      ]

    return (
        <div className='box3'>
            <div className='top'>
                <span className='title1'>数据列表</span>
            </div>
            <div className='list'>
                <Table scroll={{ x: 2500 }} rowKey={record => record.id} dataSource={dataList} columns={columns} pagination={{pageSize:5, total: 100, showSizeChanger:false}} />
            </div>
            <Modal title="催收详细页" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确认" cancelText="取消" width={1200}>
                <div className='collection'>
                    <div className='collection-left'>
                        <div className='title'>资料区</div>
                        <div className='top'>
                            <div className='jiekuan'>借款信息</div>
                            <Table dataSource={collectionList} columns={collectionDetail} width={580} size="small" pagination={false}/>
                        </div>
                        <div className='bottom'>
                            <div className='jiekuan'>用户基本信息</div>
                            <Table dataSource={users} columns={user} width={580} size="small" pagination={false} bordered showHeader={false}/>
                        </div>
                    </div>
                    <div className='collection-right'>
                        <div className='title'>操作区</div>
                        <div className='jiekuan'>罚息减免审核</div>
                        <div className='right-top'>
                            <Form>
                                <Form.Item name="Radio.Group" label="逾期还款类型" rules={[{ required: true}]}>
                                    <Radio.Group>
                                    <Radio value="a">逾期结清</Radio>
                                    <Radio value="b">逾期部分还款</Radio>
                                    <Radio value="c">逾期中</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item name="time" label="预计还款时间" rules={[{ required: true}]}>
                                    <DatePicker />
                                </Form.Item>
                                <Form.Item >
                                    <Table dataSource={jianmianList} columns={jianmian} width={580} size="small" pagination={false}/>
                                </Form.Item>
                                <Form.Item name="note" label="备注" rules={[{ required: true}]}>
                                    <Input />
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    )
}
